<!--快照-->
<template>
	<a-row>
        <a-card :title="$t('Snap')" hoverable style="border: none;border-left: 2px solid var(--themeColor);" class="a-card-style">
        	<div style="margin:0 0 1em 0 ">
		        <a-tooltip placement='bottom' v-userAuth="'D13-2'">
		          	<template slot='title'>
		            	<span>{{$t('Create')}}</span>
		          	</template>
		        	<a-button type="primary" @click="getinfo">
								<!-- icon='file-add' -->
								<!-- <i class="icon icon-new16f"></i> -->
						<Iconfont class="icon" type="icon-new16f"></Iconfont>
							</a-button>
		        </a-tooltip>
		        <a-tooltip placement='bottom' v-userAuth="'D13-3'">
		            <template slot='title'>
		                <span>{{$t('Partial-rollback')}}</span>
		            </template>
		        	<a-button :disabled="selectedRows.length==0" type='primary' style="margin-left:1em" @click="openmodal('rbp')">
		        		<!-- <a-icon :component="rollbackpart"/> -->
								<!-- <i class="icon icon-rollbackpart16f"></i> -->
						<Iconfont class="icon" type="icon-rollbackpart16f"></Iconfont>
		        	</a-button>
		        </a-tooltip>
		        <a-tooltip placement='bottom' v-userAuth="'D13-3'">
		            <template slot='title'>
		              <span>{{$t('Full-rollback')}}</span>
		            </template>
		            <a-button :disabled="selectedRows.length==0" type='primary' style="margin-left:1em" @click="openmodal('rba')">
									<!-- icon='undo' -->
									<!-- <i class="icon icon-rollback16f"></i> -->
						<Iconfont class="icon" type="icon-rollback16f"></Iconfont>
		            </a-button>
		        </a-tooltip>
		        <a-tooltip placement='bottom' v-userAuth="'D13-4'">
		            <template slot='title'>
		                <span>{{$t('Delete')}}</span>
		            </template>
		            <a-button :disabled="selectedRows.length==0" type='danger' style="margin-left:1em" @click="openmodal('del')">
									<!-- icon='close-circle' -->
									<!-- <i class="icon icon-error64f"></i> -->
						<Iconfont class="icon" type="icon-error64f"></Iconfont>
								</a-button>
		        </a-tooltip>
		    </div>
            
  	 		<a-table :columns="columns" :dataSource="snapdata" 
			   		 :rowSelection='{type:"radio",onSelect:onSelectone}' size="small" bordered 
					 :pagination='pagination' :rowKey="(record)=>record.name+getFolderFromPath(record.path)" :loading="loading" :locale="defaultSetting">
					<template slot="path" slot-scope='text'>
						<span>{{getFolderFromPath(text)}}</span>
					</template>
		    	<span slot="status" slot-scope='status'>
					<span v-if="status == 'normal'" >
						<a-tag color="green">{{$t('Actionable')}}</a-tag>
					</span>
					<span v-if="status == 'link'" >
						<a-tag color="orange">{{$t('Connecting')}}</a-tag>
					</span>
					<span v-if="status == 'copy'" >
						<a-tag color="orange">{{$t('Copying')}}</a-tag>
					</span>
					<span v-if="status == 'rollback'" >
						<a-tag color="orange">{{$t('Rolling-back')}}</a-tag>
					</span>
					<span v-if="status == 'lun'" >
						<a-tag color="orange" style="padding:0 1.3em">lun</a-tag>
					</span>
					<span v-if="status == 'clone'" >
						<a-tag color="orange">{{$t('Cloning')}}</a-tag>
					</span>
					<span v-if="status == 'flatten'" >
						<a-tag color="orange">{{$t('Separating')}}</a-tag>
					</span>
					<!-- <span v-else >{{status}} 
						<a-spin>
						<a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
						</a-spin>
					</span> -->
				</span>
		    </a-table>
        </a-card>
        
        <a-modal :title="$t('Create')" v-model='add' @cancel='cancelhandle' width='35%' @ok='addsub' 
				 :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        	<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		    	<a-form :form='form'>
		      	<a-form-item :label="$t('Snap')+$t('Name')" v-bind='formlayout' has-feedback>
	            <a-input v-decorator="['name',{
	                rules:[{required:true,message:$t('Enter')+$t('Snap')+$t('Name')},
								{pattern:namePattern,message:$t('Not_enter_special_characters')}]
	                }]" :placeholder="$t('Enter')+$t('Snap')+$t('Name')">
	            </a-input>
	          </a-form-item>
				<!-- <a-form-item :label="$t('File-system')+$t('Name')" v-bind='formlayout'>
					<a-select v-decorator="['fs_name',{
						rules:[{required:true,message:$t('Choose')+$t('File-system')+$t('Name')}]}]"  
						@change="handleChange" :placeholder="$t('Choose')+$t('File-system')+$t('Name')">
						注释这行,initialValue:$store.state.chosefile.fs_name
						注释这行<a-select-option v-for='(i,index) in basedata' :value='i.fs_name' :key="index">{{i.fs_name}}</a-select-option>
						<a-select-option v-for='(i,index) in fileSystemNames' :value='i' :key="index">{{i}}</a-select-option>
					</a-select>
				</a-form-item> -->
						<a-form-item :label="$t('Path')" v-bind='formlayout'>
							<a-select v-decorator="['path',{
								rules:[{required:true,message:$t('Choose')+$t('Path')}]
							}]" :placeholder="$t('Choose')+$t('Path')">
								<a-select-option v-for='(i,index) in basevalue' :value='i' :key="index">{{i}}</a-select-option>
							</a-select>
						</a-form-item>
		    	</a-form>
		</a-modal>
    </a-row>
</template>
<script>

	// import rollbackpart from '../../../../../static/images/svg/ic_rollback_part.svg'
	// import { log } from 'util';
	import EmptyData from '@/components/common/EmptyData'
	import request from '@/request/request'

	export default {
		name: "snap",
		// template: '<a-icon :component="rollbackpart" />',
		props: ['fileSystemNames'],
		components: { EmptyData },
		data(){
			return{
				form:this.$form.createForm(this),
				// rollbackpart,
				columns:[
					{ title: this.$t('Snap')+ this.$t('Name'), dataIndex: 'name', key: 'name',ellipsis: true },
					{ title: this.$t('Folder')+ this.$t('Name'), dataIndex: 'path', key: 'path',ellipsis: true,scopedSlots:{customRender:'path'} },
					// { title: this.$t('Path'), dataIndex: 'path', key: 'path',ellipsis: true },
					{ title: this.$t('Create')+ this.$t('Time'), dataIndex: 'created', key: 'created',ellipsis: true },
					{ title: this.$t('Status'), dataIndex: 'status',key: 'status',ellipsis: true,scopedSlots:{customRender:'status'}},
				],
				add:false,
				pagination:{
					defaultPageSize:5,
					showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
					showSizeChanger:true,
					pageSizeOptions: ['5', '10', '15', '20'],
					onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
					buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
				},
				formlayout:{
					labelCol:{span:6},
					wrapperCol:{span:14}
				},
				snapdata:[],
				basedata:[],
				basevalue:'',
				baseinfo:'',
				records:'',
				loading:true,
				spinning:false,
				defaultSetting: {emptyText:<EmptyData />},
				selectedRows: []
			}
		},
		watch:{
			// getchosefile(val){
			// 	this.getsome()
			// },
			getlanguage(val){
				this.columns=[
					{ title: this.$t('Snap')+ this.$t('Name'), dataIndex: 'name', key: 'name',ellipsis: true },
					{ title: this.$t('Folder')+ this.$t('Name'), dataIndex: 'path', key: 'path',ellipsis: true,scopedSlots:{customRender:'path'} },
					// { title: this.$t('Path'), dataIndex: 'path', key: 'path',ellipsis: true },
					{ title: this.$t('Create')+ this.$t('Time'), dataIndex: 'created', key: 'created',ellipsis: true },
					{ title: this.$t('Status'), dataIndex: 'status',key: 'status',ellipsis: true,scopedSlots:{customRender:'status'}},
				]
			},
			"$store.state.isUpdateSnapPath"(newValue) {//新增快照那里去掉文件系统名后加的
				if(newValue) {
					request('post', 'cephfs/operation/getFSAndOneDepthName').then(res=>{
						// console.log('快照获取文件系统对应的路径', res)
						this.baseinfo = res.data
						this.basevalue = res.data.pentastor
					})
					this.$store.commit('toUpdateSnapPath', false)
				}
			},
		},
		computed:{
			// getchosefile() {
			// 	return this.$store.state.chosefile
			// },
			getlanguage(){
				return this.$store.state.language
			}
		},
		created(){
			this.addListenerfun('fsview',this.getsome) //通知交互：监听变化 刷新
		},
		mounted(){
			this.getsome();
		},
		methods:{
			getsome(){
				this.loading = true
				request('get', 'cephfs/snap/').then(res => {
					// console.log('获取文件系统快照',res)
					if(res.data.flag == 1) {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
					}else {
						this.snapdata = [];
						this.snapdata = res.data;
						// this.loading = false
					}
				}).catch(err => {
					// this.loading = false;
				}).finally(() => {
					this.loading = false;
				})
				request('post', 'cephfs/operation/getFSAndOneDepthName').then(res=>{
					// console.log('快照获取文件系统对应的路径', res)
					this.baseinfo = res.data
					this.basevalue = res.data.pentastor
				})
				
				// if(this.$store.state.chosefile && !this.$store.state.chosefile.children){
				// 	this.$axios.get(this.allurl+'cephfs/snap',{
				// 		params:{
				// 			fs_name:this.$store.state.chosefile.fs_name,
				// 			path:this.$store.state.chosefile.path
				// 		}
				// 	}).then(res=>{
				// 		this.snapdata =[]
				// 		for(var j=0;j<res.data.value.length;j++){
				// 			if(res.data.value[j]){
				// 				this.snapdata = this.snapdata.concat(res.data.value[j].snapshots) //数组合并	
				// 			}
				// 		}
				// 		this.loading = false
				// 	})
				// }else{
				// 	this.$axios.get(this.allurl+'cephfs/snap/').then(res=>{
						
				// 		this.snapdata =[]
				// 		this.basedata = res.data
				// 		for(var i=0;i<res.data.length;i++){
				// 			for(var j=0;j<res.data[i].value.length;j++){
				// 				if(res.data[i].value[j]){
				// 					this.snapdata = this.snapdata.concat(res.data[i].value[j].snapshots) //数组合并			
				// 				}
				// 			}
				// 		}
				// 		this.loading = false
				// 	})
				// }
				
			},
			getinfo(){
				this.add = true
				// this.$axios.get(this.allurl+'cephfs/snap/_info').then(res=>{
				// this.basevalue = res.data[this.$store.state.chosefile.fs_name]
			},
			onSelectone(record, selected, selectedRows){
				this.selectedRows = selectedRows;
				this.records = record  //选中的一条信息
			},

			handleChange(value){
				this.form.resetFields('path')
				// this.basevalue = this.baseinfo[value]
				this.basevalue = this.baseinfo[value]
			},
			//创建快照
			addsub(e){
				e.preventDefault();
				this.form.validateFields((err,value)=>{
					if(!err){
						this.spinning = true;
						// this.$axios.post(this.allurl+'cephfs/snap',value).then(res=>{
						request('put', 'cephfs/snap/',{
							dir_name: value.path, // 路径
							snapshot_name: value.name, // 快照名称
							// fs_name: value.fs_name, // 文件系统名称
						}).then(res => {
							this.model(res.data.id) //返回模板
							this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							// this.gettask()  //任务栏信息
							this.spinning = false;
							this.add=false;
							this.form.resetFields();
							this.getsome();
						}).catch(err => {
							this.spinning = false;
							this.add = false;
						})
					}
				})
			},
			openmodal(name){
				if(this.records !== ''){
					for (const item of this.snapdata) {
						if(this.records.name == item.name){
							this.records = item
						}
					}
					if(this.records.status !== 'normal' ){
						this.$notification['error']({
							message: this.$t('Try-later')
						})
					}else{
						if(name == 'rbp'){
							this.rbp()
						}
						else if(name == 'rba'){
							this.rba()
						}
						else if(name == 'del'){
							this.del()
						}
					}
				}
				else{
				this.$notification['error']({
					message: this.$t('Choose')+ this.$t('Operating-object')
				})
				}
				// if(name=='add'){
				// 	this.add = true
				// 	this.getinfo()
				// }
			},
			//部分回滚
			rbp(){
				let _this = this
				this.$confirm({
					title: this.$t('Snap')+this.$t('Partial-rollback'),
					content: this.$t('Sure-to')+this.$t('Partial-rollback')+': '+this.records.name+this.$t('Status')+' ？',
					cancelText:this.$t('Cancel'),
					okText:this.$t('Sure'),
					okType:'danger',
					onOk(){
						// _this.$axios({
						// // method: 'put',
						// // url: _this.allurl+'cephfs/snap',
						// method: 'post',
						// url: _this.allurl+'cephfs/snap/rollback',
						// data: {
						// 	path:_this.records.path,
						// 	is_complete:false
						// 	// fs_name:_this.$store.state.chosefile.fs_name,
						// 	// name:_this.records.name,
						// 	// path:_this.records.path,
						// 	// is_complete:false
						// }
						// })
						request('post', 'cephfs/snap/rollback', {
							path:_this.records.path,
							is_complete:false
						})
						.then(res=>{
							_this.model(res.data.id) //返回模板
							_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							_this.$emit('omodal',false) 
							// _this.gettask()  //任务栏信息
							_this.getsome()
							this.selectedRows = [];
						})
					},
					onCancel(){
					}
				})
			},
			//完全回滚
			rba(){
				let _this = this
				this.$confirm({
					title: this.$t('Snap')+this.$t('Full-rollback'),
					content: this.$t('Sure-to')+this.$t('Full-rollback')+': '+this.records.name+this.$t('Status')+' ？',
					cancelText:this.$t('Cancel'),
					okText:this.$t('Sure'),
					okType:'danger',
					onOk(){
						// _this.$axios({
						// // method: 'put',
						// // url: _this.allurl+'cephfs/snap',
						// method: 'post',
						// url: _this.allurl+'cephfs/snap/rollback',
						// data: {
						// 	path:_this.records.path,
						// 	is_complete:true
						// 	// fs_name:_this.$store.state.chosefile.fs_name,
						// 	// name:_this.records.name,
						// 	// path:_this.records.path,
						// 	// is_complete:true
						// }
						// })
						request('post', 'cephfs/snap/rollback', {
							path:_this.records.path,
							is_complete:true
						})
						.then(res=>{
							_this.model(res.data.id) //返回模板
							_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							_this.$emit('omodal',false) 
							// _this.gettask()  //任务栏信息
							_this.getsome()
							this.selectedRows = []
						})
					},
					onCancel(){
					}
				})
			},
			//删除文件系统-快照
			del(){
				let _this = this
				this.$confirm({
					title: this.$t('Delete')+this.$t('Snap'),
					content:this.$t('Sure-to-del')+": "+this.records.name+' ？',
					cancelText:this.$t('Cancel'),
					okText:this.$t('Sure'),
					okType:'danger',
					onOk(){
						// _this.$axios({
						// method: 'delete',
						// url: _this.allurl+'cephfs/snap',
						// data: {
						// 	path_name: _this.records.path,
						// 	name: _this.records.name
						// 	// fs_name:_this.$store.state.chosefile.fs_name,
						// 	// name:_this.records.name,
						// 	// path:_this.records.path
						// }
						// })
						request('DELETE', 'cephfs/snap', {
							path_name: _this.records.path,
							name: _this.records.name
						})
						.then(res=>{
							_this.model(res.data.id) //返回模板
							_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							// _this.gettask()  //任务栏信息
							_this.getsome()
							this.selectedRows = [];
						})
					},
					onCancel(){
					}
				})
			},
			cancelhandle(){
				this.authorize=false
				this.spinning=false
				this.form.resetFields();
			},

			//截取路径中的文件夹名
			getFolderFromPath(path) {
				let path_name = path.substring(1);
				const index = path_name.indexOf('/');
				return path_name.substring(0,index)
			}
		}
	}
</script>